<%- include("../header.ejs")-%>
<el-header style="font-size: 12px">
    <el-form :inline="true" ref="form" :model="formInline" label-width="80px">
        <el-form-item label="角色ID">
            <el-input v-model="formInline.role_id" placeholder="角色ID"></el-input>
        </el-form-item>
        <el-form-item label="角色昵称">
            <el-input v-model="formInline.name" placeholder="角色昵称"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
        </el-form-item>
    </el-form>
</el-header>
<el-main>
    <template>
        <el-table v-loading="loading" :data="tableData" style="width: 100%">
            <el-table-column prop="role_id" label="角色ID" width="80"></el-table-column>
            <el-table-column prop="server_id" label="服务器ID" width="80"></el-table-column>
            <el-table-column prop="name" label="昵称" width="180"></el-table-column>

            <el-table-column label="爵位" width="100">
                <template slot-scope="scope">
                    {{ scope.row.level }}
                    <el-button size="mini" icon="el-icon-edit" @click="editLevel(scope.row)"></el-button>
                </template>
            </el-table-column>

            <el-table-column label="VIP" width="100">
                <template slot-scope="scope">
                    {{ scope.row.vip }}
                    <el-button size="mini" icon="el-icon-edit" @click="editVIP(scope.row)"></el-button>
                </template>
            </el-table-column>

            <el-table-column prop="power" label="实力" width="80"></el-table-column>

            <el-table-column label="关卡" width="110">
                <template slot-scope="scope">
                    <el-tag size="medium" @click="editStage(scope.row)">
                        {{ scope.row.stage.name }}({{ scope.row.stage.stage_id }})</el-tag>
                </template>
            </el-table-column>

            <el-table-column label="任务" width="110">
                <template slot-scope="scope">
                    <el-tag size="medium" @click="editQuest(scope.row)">
                        {{ scope.row.quest.name }}</el-tag>
                </template>
            </el-table-column>

            <el-table-column label="创建日期" width="200">
                <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 10px">{{ scope.row.created_at }}</span>
                </template>
            </el-table-column>

            <el-table-column label="最近登录" width="200">
                <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 10px"><span
                            v-if="scope.row.online">{{scope.row.online.online_time}}</span></span>
                </template>
            </el-table-column>

            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" icon="el-icon-link" @click="handlecCpatainLink(scope.row)">船长</el-button>
                    <el-button size="mini" icon="el-icon-link" @click="handlecMaidLink(scope.row)">侍女</el-button>
                </template>
            </el-table-column>
        </el-table>
    </template>
</el-main>
<el-footer style="text-align: left; font-size: 12px">
    <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page.sync="currentPage1" :page-size="20" layout="total, prev, pager, next" :total="<%= total %>">
    </el-pagination>
</el-footer>

<el-dialog title="" :visible.sync="dialogVisible" width="30%">
    <el-form ref="form" :model="form" label-width="80px">

        <el-form-item :label="form.label">
            <el-select v-model="form.value">
                <el-option v-for="item in form.list" :key="item.ID" :label="item.Name" :value="item.ID">
                </el-option>
            </el-select>
        </el-form-item>

    </el-form>
    <span slot="footer" class="dialog-footer">
        <el-button size="mini" icon="el-icon-check" type="primary" @click="update">确定</el-button>
        <el-button size="mini" icon="el-icon-close" @click="dialogVisible=false">取消</el-button>
    </span>
</el-dialog>

<%- include("../footer.ejs")-%>

<script>

    new Vue({
        router,
        el: '#app',
        data: {
            lock: false,
            loading: true,
            tableData: [],
            currentPage1: 1,
            dialogVisible: false,
            formInline: { role_id: '', name: '' },
            form: { label: "", list: [], value: 0, role_id: 0, path: "" },
            quests: {},
        },
        created: function () {
            this.handleCurrentChange(1)

            fetch('/api/quests').then(response => response.json()).then(json => {
                for (let k in json) {
                    json[k].Name = json[k].Name + "(" + json[k].ID + ")";
                }
                this.quests = json;
            });
        },
        methods: {
            update() {

                if (!this.lock) {
                    this.lock = true

                    fetch(this.form.path, {
                        method: 'POST',
                        headers: { 'content-type': 'application/json; charset=utf-8', },

                        body: JSON.stringify({ "value": this.form.value }),
                    }).then(response => response.json()).then(json => {
                        this.dialogVisible = false
                        message(json, this)

                        fetch('/api/roles?role_id=' + this.form.role_id).then(response => response.json()).then(json => {

                            var newRow = json[0];

                            for (k in this.tableData) {
                                var row = this.tableData[k];
                                if (row.role_id == newRow.role_id) {
                                    row.level = newRow.level;
                                    row.vip = newRow.vip;
                                    row.stage = newRow.stage;
                                    row.quest = newRow.quest;
                                }
                            }
                        });

                        this.lock = false
                    });
                }
            },

            search() {

                fetch('/api/roles?role_id=' + this.formInline.role_id + '&name=' + this.formInline.name).then(response => response.json()).then(json => {
                    this.tableData = json
                });
            },

            editLevel(row) {

                this.form.label = "level";
                this.form.role_id = row.role_id;
                this.form.path = "/api/level/" + row.role_id;

                fetch("/api/role/" + row.role_id).then(response => response.json()).then(json => {

                    this.dialogVisible = true;
                    this.form.value = json.level;
                    this.form.list = [];
                    for (var i = 0; i <= 51; i++) {
                        this.form.list.push({ "ID": i, "Name": i });
                    }
                });
            },

            editVIP(row) {

                this.form.label = "vip";
                this.form.role_id = row.role_id;
                this.form.path = "/api/vip/" + row.role_id;

                fetch("/api/role/" + row.role_id).then(response => response.json()).then(json => {

                    this.dialogVisible = true;
                    this.form.value = json.vip;
                    this.form.list = [];
                    for (var i = 0; i <= 13; i++) {
                        this.form.list.push({ "ID": i, "Name": i });
                    }
                });
            },

            editStage(row) {

                this.form.label = "stage";
                this.form.role_id = row.role_id;
                this.form.path = "/api/stage/" + row.role_id;

                fetch(this.form.path).then(response => response.json()).then(json => {

                    this.dialogVisible = true;
                    this.form.value = json.stage_id;
                    this.form.list = [];
                    for (var i = 1; i <= 999; i++) {
                        this.form.list.push({ "ID": i, "Name": i });
                    }
                });
            },

            editQuest(row) {

                this.form.label = "quest";
                this.form.role_id = row.role_id;
                this.form.path = "/api/quest/" + row.role_id;

                fetch(this.form.path).then(response => response.json()).then(json => {

                    this.dialogVisible = true;
                    this.form.value = json.quest_id;
                    this.form.list = this.quests;
                });
            },

            handlecCpatainLink(row) {

                this.$router.push('/captains/' + row.role_id);
                this.$router.go(0);
            },
            handlecMaidLink(row) {

                this.$router.push('/maids/' + row.role_id);
                this.$router.go(0);
            },
            handleSizeChange(val) { },
            handleCurrentChange(val) {

                this.loading = true;

                fetch('/api/roles?page=' + val).then(response => response.json()).then(json => {
                    this.tableData = json;
                    this.loading = false;
                });
            }
        }
    })

</script>